<template>
<div class="app-container calendar-list-container">
  <div class="filter-container">
    <el-select @keyup.enter.native="handleFilter" clearable style="width: 200px;" class="filter-item" v-model="listQuery.queryType">
      <el-option
      v-for="item in queryTypeList"
      :key="item.value"
      :label="item.label"
      :value="item.value">
      </el-option>
    </el-select>
    <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="请输入查询条件" v-model="listQuery.queryVal"> </el-input>

    <el-button class="filter-item" type="primary" v-waves icon="search" @click="handleFilter">搜索</el-button>
  </div>
  <el-table :key='tableKey' :data="list" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%">
    <el-table-column align="center" label="ID" min-width="10%"> <template scope="scope">
          <span>{{scope.row.userId}}</span>
        </template> </el-table-column>
    <el-table-column min-width="10%" align="center" label="销售员姓名"> <template scope="scope">
        <span>{{scope.row.realName}}</span>
      </template> </el-table-column>
    <el-table-column min-width="10%" align="center" label="昵称"> <template scope="scope">
        <span>{{scope.row.nickName}}</span>
      </template> </el-table-column>
    <el-table-column min-width="10%" align="center" label="联系电话"> <template scope="scope">
            <span>{{scope.row.mobile}}</span>
          </template> </el-table-column>
    <el-table-column min-width="10%" align="center" label="工号(营销代码)"> <template scope="scope">
            <span>{{scope.row.marketCode}}</span>
          </template> </el-table-column>
    <el-table-column min-width="10%" align="center" label="身份证号"> <template scope="scope">
            <span>{{scope.row.idcardNo}}</span>
          </template> </el-table-column>
    <el-table-column min-width="10%" align="center" label="注册时间"> <template scope="scope">
            <span>{{scope.row.createTime}}</span>
          </template> </el-table-column>
    <el-table-column align="center" label="操作" min-width="20% "> <template scope="scope">
        <el-button size="small" type="success" @click="handleDetail(scope.row)">详情</el-button>
      </template> </el-table-column>
  </el-table>
  <div v-show="!listLoading" class="pagination-container">
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.pageNo" :page-sizes="[10,20,30, 50]" :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
  </div>
  
 <el-dialog :title="sendDialogTitle" :visible.sync="sendDialogFormVisible" :show-close="closeApp" :close-on-click-modal="closeDialog">
    <el-form :model="sendForm" :rules="rules" ref="sendForm" label-width="80px">
     <el-form-item label="ID:">
       <el-input v-model="sendForm.userId"  :disabled="true"></el-input>
     </el-form-item>
     <el-form-item label="*销售员姓名:" prop="realName">
       <el-input v-model="sendForm.realName" placeholder="请输入内容" clearable></el-input>
     </el-form-item>
      <el-form-item label="昵称:">
       <el-input v-model="sendForm.nickName"  :disabled="true"></el-input>
     </el-form-item>
     <el-form-item label="*联系电话:" prop="mobile">
       <el-input v-model="sendForm.mobile" placeholder="请输入内容" clearable></el-input>
     </el-form-item>
     <el-form-item label="*工号(营销代码):" prop="marketCode">
       <el-input v-model="sendForm.marketCode" placeholder="请输入内容" clearable @blur="verify(sendForm.marketCode)"></el-input>
     </el-form-item>
     <el-form-item label="*身份证号:" prop="idcardNo">
       <el-input v-model="sendForm.idcardNo" placeholder="请输入内容" clearable></el-input>
     </el-form-item>
     <el-form-item label="注册时间:">
       <el-input v-model="sendForm.createTime"   :disabled="true"></el-input>
     </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancelSend('sendForm')">取 消</el-button>
      <el-button type="primary" @click="updateSend('sendForm')">确 定</el-button>
    </div>
  </el-dialog>
</div>
</template>

<script>
import{
  page,
  getByUserId,
  getByMarketCode,
  sendObj
  }from 'api/personnel/baseUser/index';
import { mapGetters } from 'vuex';
export default {
    name:'baseUser',
    data(){
     return{
      list: null,
      total: null,
      listLoading: true,
      sendDialogFormVisible:false,
      sendDialogTitle:"销售员档案详情",
      tableKey: 0,
      closeDialog:false,
      closeApp:false,
      submitTUR:true,
      queryTypeList:[
        {
          value: '1',
          label: 'ID'
        }, {
          value: '2',
          label: '销售员姓名'
        }, {
          value: '3',
          label: '联系电话'
        }, {
          value: '4',
          label: '工号'
        }
      ],
      listQuery: {
        pageNo: 1,
        pageSize: 20,
        queryType:undefined,
        queryVal:undefined,
      },
      sendForm:{
        userId:undefined,
        realName:undefined,
        nickName:undefined,
        mobile:undefined,
        marketCode:undefined,
        idcardNo:undefined,
        createTime:undefined
      },
      verifyList:{
        marketCode:undefined,
      },
      rules:{
        realName:[
          {
            required: true,
            message: "请输入销售员姓名",
            trigger: "blur"
          }
        ],
        mobile:[
          {
            required: true,
            message: "请输入联系电话",
            trigger: "blur"
          },
          { 
            pattern: /^1\d{10}$/,
            message: '请输入11位电话数字'
         }
        ],
        marketCode:[
          {
            required: true,
            message: "请输入工号(营销代码)",
            trigger: "blur"
          }
        ],
        idcardNo:[
          {
            required: true,
            message: "请输入身份证号",
            trigger: "blur"
          },
          { 
            pattern: /(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
            message: '请输入正确的身份证号码'
         }
        ]
      }
        }
    },
    created(){
      this.getByAllLisy();
    },
   
    computed: {
    ...mapGetters([
      'elements'
    ])
  },
  methods:{
    getByAllLisy(){
      this.listLoading = true;
      page(this.listQuery).then(response=>{
        this.list = response.data.rows;
        this.total = response.data.total;
        this.listLoading = false;
      })
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val;
      this.getByAllLisy();
    },
       handleCurrentChange(val) {
      this.listQuery.pageNo = val;
      this.getByAllLisy();
    },
     handleFilter() {
       this.getByAllLisy();
    },
   
    cancelSend(formName) {
      this.sendDialogFormVisible = false;
      this.$nextTick(()=>{
      this.$refs[formName].resetFields();
  })
    },
     handleDetail(val){
      this.sendDialogFormVisible = true;
      getByUserId(val.userId).then(response=>{
        this.sendForm=response.data;
      })
    },
    verify(val){
      this.verifyList.marketCode=val
      getByMarketCode(this.verifyList).then(response=>{
        if(response.message=="200"){
          this.submitTUR=true;
        }else if(response.message=="300"){
          this.$notify({
              title: '错误',
              message: '该'+val+"营销代码已经存在!",
              type: 'error',
              duration: 2000
            });
          this.submitTUR=false;
        }
      })
    },
    updateSend(formName){
      if(this.submitTUR==true){
       const set = this.$refs;
       set[formName].validate(valid => {
        if (valid) {
          this.sendDialogFormVisible = false;
          sendObj(this.sendForm).then(() => {
            this.sendDialogFormVisible = false;
            this.getByAllLisy();
            this.$notify({
              title: '成功',
              message: '修改成功',
              type: 'success',
              duration: 2000
            });
          });
        } else {
          return false;
        }
      });
      }else{
        this.$notify({
              title: '错误',
              message: "营销代码已经存在!",
              type: 'error',
              duration: 2000
            });
      }
    }
  }
}
</script>